<template>
  <div class="file-manager">
    <!-- 搜索栏 -->
    <div class="search-box">
      <i class="iconfont icon-search"></i>
      <input type="text" placeholder="搜索文件" v-model="searchQuery">
    </div>

    <!-- 文件类型过滤器 -->
    <div class="file-filters">
      <div 
        v-for="filter in filters" 
        :key="filter.type"
        :class="['filter-item', { active: currentFilter === filter.type }]"
        @click="currentFilter = filter.type"
      >
        <i :class="['iconfont', filter.icon]"></i>
        <span>{{ filter.name }}</span>
        <span class="count">{{ getFilterCount(filter.type) }}</span>
      </div>
    </div>

    <!-- 文件列表 -->
    <div class="files-container">
      <!-- 上传按钮 -->
      <div class="upload-area" @click="triggerUpload">
        <input 
          type="file" 
          ref="fileInput" 
          @change="handleFileUpload" 
          multiple 
          style="display: none"
        >
        <i class="iconfont icon-upload"></i>
        <span>点击或拖拽文件上传</span>
      </div>

      <!-- 文件列表 -->
      <div class="file-list">
        <div 
          v-for="file in filteredFiles" 
          :key="file.id"
          class="file-item"
        >
          <!-- 文件图标 -->
          <div class="file-icon">
            <i :class="['iconfont', getFileIcon(file.type)]"></i>
          </div>

          <!-- 文件信息 -->
          <div class="file-info">
            <div class="file-name">{{ file.name }}</div>
            <div class="file-meta">
              <span class="size">{{ formatSize(file.size) }}</span>
              <span class="time">{{ formatTime(file.time) }}</span>
            </div>
          </div>

          <!-- 文件操作 -->
          <div class="file-actions">
            <i class="iconfont icon-download" @click="downloadFile(file)"></i>
            <i class="iconfont icon-share" @click="shareFile(file)"></i>
            <i class="iconfont icon-delete" @click="deleteFile(file)"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const searchQuery = ref('')
const currentFilter = ref('all')
const fileInput = ref(null)

// 文件类型过滤器
const filters = [
  { type: 'all', name: '全部文件', icon: 'icon-folder' },
  { type: 'document', name: '文档', icon: 'icon-document' },
  { type: 'image', name: '图片', icon: 'icon-image' },
  { type: 'video', name: '视频', icon: 'icon-video' },
  { type: 'audio', name: '音频', icon: 'icon-audio' }
]

// 示例文件数据
const files = ref([
  {
    id: 1,
    name: '项目方案.docx',
    type: 'document',
    size: 2500000, // 2.5MB
    time: '2024-03-10 15:30',
    url: '/files/project.docx'
  },
  {
    id: 2,
    name: '会议记录.pdf',
    type: 'document',
    size: 1800000, // 1.8MB
    time: '2024-03-09 14:20',
    url: '/files/meeting.pdf'
  },
  {
    id: 3,
    name: '产品设计图.png',
    type: 'image',
    size: 3500000, // 3.5MB
    time: '2024-03-08 10:15',
    url: '/files/design.png'
  },
  {
    id: 4,
    name: '演示视频.mp4',
    type: 'video',
    size: 15000000, // 15MB
    time: '2024-03-07 16:40',
    url: '/files/demo.mp4'
  }
])

// 过滤文件
const filteredFiles = computed(() => {
  let result = files.value

  // 按类型过滤
  if (currentFilter.value !== 'all') {
    result = result.filter(file => file.type === currentFilter.value)
  }

  // 按搜索关键词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(file => 
      file.name.toLowerCase().includes(query)
    )
  }

  return result
})

// 获取每个类型的文件数量
const getFilterCount = (type) => {
  if (type === 'all') return files.value.length
  return files.value.filter(file => file.type === type).length
}

// 获取文件图标
const getFileIcon = (type) => {
  const icons = {
    document: 'icon-document',
    image: 'icon-image',
    video: 'icon-video',
    audio: 'icon-audio'
  }
  return icons[type] || 'icon-file'
}

// 格式化文件大小
const formatSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化时间
const formatTime = (time) => {
  return new Date(time).toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 触发文件上传
const triggerUpload = () => {
  fileInput.value.click()
}

// 处理文件上传
const handleFileUpload = (event) => {
  const uploadedFiles = event.target.files
  // 这里处理文件上传逻辑
  console.log('Uploading files:', uploadedFiles)
}

// 下载文件
const downloadFile = (file) => {
  console.log('Downloading file:', file)
  // 实现文件下载逻辑
}

// 分享文件
const shareFile = (file) => {
  console.log('Sharing file:', file)
  // 实现文件分享逻辑
}

// 删除文件
const deleteFile = (file) => {
  const index = files.value.findIndex(f => f.id === file.id)
  if (index !== -1) {
    files.value.splice(index, 1)
  }
}
</script>

<style scoped>
.file-manager {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
}

.file-filters {
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
  background: #f5f7fb;
}

.filter-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 4px;
  transition: all 0.3s;
}

.filter-item i {
  margin-right: 8px;
  font-size: 18px;
}

.filter-item .count {
  margin-left: auto;
  background: #e0e0e0;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
}

.filter-item:hover {
  background: #e3f2fd;
}

.filter-item.active {
  background: #1976d2;
  color: white;
}

.filter-item.active .count {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.files-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.upload-area {
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: #1976d2;
  background: #f5f7fb;
}

.upload-area i {
  font-size: 32px;
  color: #666;
  margin-bottom: 8px;
}

.file-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.file-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.file-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.file-icon i {
  font-size: 24px;
  color: #1976d2;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #666;
}

.file-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

.file-item:hover .file-actions {
  opacity: 1;
}

.file-actions i {
  padding: 4px;
  cursor: pointer;
  color: #666;
  transition: color 0.3s;
}

.file-actions i:hover {
  color: #1976d2;
}

.icon-delete:hover {
  color: #f44336 !important;
}
</style> 